<template>
    <div class="noticeManage">
        <h2 class="my-big-font">通知管理</h2>
        <div class="noticeManage-content">
            <!-- <div class="noticeManage-l">
                <h6 class="title">{{noticeListData.title}}</h6>
                <div class="content" v-html="noticeListData.content"></div>
            </div>
            <span class="my-btn" @click="goNoticeManageEdit">编辑</span> -->
            <ul>
              <h6 class="title" >{{title}}</h6>
                <li v-for="p,i of noticeListData" :key="i">
                    <div class="noticeManage-l">

                        当{{p.type}}余额不足<span class="title" >{{p.waringMoney}}</span>元时，通知给
                        <span class="content" v-html="p.phone"></span>
                    </div>
                    <span class="my-btn" @click="goNoticeManageEdit(p.id)">编辑</span>
                </li>
            </ul>
            <!-- <el-pagination @current-change="handleCurrentChange"  background layout="prev, pager, next" :page-count=pageCount></el-pagination> -->
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            title:'账户余额不足预警',
            noticeListData:[
                {
                    id:'',
                    type:'',
                    phone:'',
                    waringMoney:''
                }
            ]
        }
    },
    mounted(){
        this.getRechargeData()
    },
    methods:{
        //获取充值数据
        getRechargeData(){
            this.axios.post("/recharge/sys/waring/list").then(result=>{
                this.noticeListData=result.data.data;
                  if (this.noticeListData) {
                    for (var i = 0; i < this.noticeListData.length; i++) {
                      if(this.noticeListData[i].type==1){
                         this.noticeListData[i].type='158平台话费充值'
                      }else if(this.noticeListData[i].type==2){
                        this.noticeListData[i].type='易通峰联'
                      }
                    }
                  }
            })
        },
        goNoticeManageEdit(id){
            this.$router.push({path:"/index/noticeManageEdit",query:{id:id}})
        }
    }
}
</script>

<style scoped>
.noticeManage{
    padding: 30px 82px 50px 30px;
    background: #fff;
    margin: 10px 0 0 10px;
    color: #333333;
    min-height: calc(100vh - 96px);
    position: relative;
}
.noticeManage h2{
    padding-top: 0;
}
/* 内容 */
.noticeManage-content{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    padding-left: 0;
    color: #444;
}
ul{
    width: 100%;
}
ul li{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    /* background: #fffef7; */
    margin-bottom: 10px;
}
ul li:hover{
    background: #f5f8ff;
}
.noticeManage-l .content{
    font-size: 15px;
    margin-top: 8px;
}
.my-btn{
    width: 62px;
    height: 31px;
    line-height: 31px;
    border: 0;
    font-size: 15px;
}
</style>